<template>
    <div class="rankList banxin-small tanxin">
        <!-- 左边的排行榜 -->
        <div class="rankListl">
            <div class="rankListl-in">
                <h2 class="cloudMusic">云音乐特色榜</h2>
                <ul>
                    <li class="item f-cb tanxin" v-for="(item,index) in cloudMusic" 
                    :key="index"
                    @click="CloudMusic(item.id)">
                        <div class="left">
                            <img :src="item.coverImgUrl" alt="" class="avatar" width="40px">
                        </div>
                        <div class="right">
                            <p class="name">{{item.name}}</p>
                            <p class="s-fc4">{{item.updateFrequency}}</p>
                        </div>
                    </li>
                </ul>
                <h2 class="world">全球媒体榜</h2>
                <ul class="f-cb">
                    <li class="item f-cb tanxin" v-for="(item,index) in world" 
                    :key="index"
                    @click="CloudMusic(item.id)"
                    >
                        <div class="left">
                            <img :src="item.coverImgUrl" alt="" class="avatar" width="40px">
                        </div>
                        <div class="right">
                            <p class="name">{{item.name}}</p>
                            <p class="s-fc4">{{item.updateFrequency}}</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="rankListr">
            <!-- 右边的组件 -->
            <RankListRight :Oneid="Oneid" ref="Rlr" />
        </div>
    </div>
</template>

<script>
import RankListRight from "@/components/home/RankListRight.vue"
import {TopListApi} from "@/request/api"
export default {
    data () {
        return {
            cloudMusic:[],
            world:[],
            // 右边组件默认显示的排行榜的第一个的内容的id
            Oneid: 0,
        }
    },
    created(){
        TopListApi().then(res => {
            console.log(res)
            if(res.data.code === 200){
                this.cloudMusic = res.data.list.slice(0,4)
                console.log(this.cloudMusic);
                this.Oneid = this.cloudMusic[0].id
                console.log(this.Oneid);
                this.world = res.data.list.slice(4,37)
                console.log(this.world)
            }
        })

    },
    methods:{
        CloudMusic(val){
            this.$store.state.ids = val;
            console.log(this.$store.state.ids);
            console.log(val);
        }
    },
    components:{
        RankListRight,
    }
}
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.rankList{
    background: #f5f5f5;
    .rankListl{
        width: 240px;
        border: 1px solid #ccc;
        border-top: 0;
        border-bottom: 0;
        .rankListl-in{
            margin-top: 40px;
            h2{
                padding: 0 10px 12px 15px;
                font-size: 14px;
                color:#000;
            }
            ul{
                cursor: pointer;
                vertical-align: middle;
                .f-cb{
                padding: 10px 0 10px 20px;
                height: 42px;
                .left{
                     display: inline;
                     width: 40px;
                     height: 40px;
                     background-color: pink;
                }
                .right{
                    
                    margin-left: 10px;
                    .name{
                        width: 150px;
                        overflow: hidden;
                        margin-top: 2px;
                        margin-bottom: 8px
                     }
                     .s-fc4{
                        color: #9999;
                     }
                }
            }
            }
        }
    }
    .rankListr{
        border-right: 1px solid #ccc;
        width: 740px;
        background: #fff;
        padding-bottom: 50px;
    }
}
</style>